<template>
  <div>
    <van-nav-bar
        title="编辑地址"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <!-- 输入任意文本 -->
    <van-form @submit="onSubmit" onSubmit>
      <van-field v-model="text" name="name" label="姓名"  placeholder="姓名" />
      <van-field v-model="tel"  name="tel" type="tel" label="手机号" :rules="[{ pattern, message: '请输入正确内容' }]" placeholder="手机号" />
      <van-field v-model="vlaue" name="address" label="地区" readonly  @click="flag=true" is-link  placeholder="地区" />
      <van-field v-model="address" name="ress"  label="详细地址" placeholder="详细地址" />
      <van-field v-model="PostOffice" name="PostOffice" label="邮政编码" maxlength="5"  placeholder="邮政编码" />
      <van-cell-group style="margin:10px 0">
        <van-switch-cell v-model="checked" title="默认" name="isDefault" />
      </van-cell-group>
      <van-popup v-model="flag" position="bottom" :style="{ height: '50%' }">
        <van-area
            title="收货地址"
            @confirm="confirm"
            @cancel="cancel"
            :area-list="areaList"
            :columns-placeholder="['请选择', '请选择', '请选择']"
        />
        -->
      </van-popup>
      <van-button native-type="submit"  color="linear-gradient(to right, #ff6034, #ee0a24)" round  size="large">修改</van-button>
    </van-form>
  </div>
</template>

<script>
import {Toast} from "vant";
import { areaList } from '@vant/area-data';
export default {
  name: "upaddress",
  data(){
    return{
      flag:false,
      showShare:false,
      areaList,
      pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
      tel:'',//手机号
      text:'',//姓名
      vlaue:'',//地址
      address:'',//详情地址
      checked:null,//是否默认
      PostOffice:'',//邮政编码
      ID:null,
    }
  },
  created() {
    let {id}=this.$route.params;
    this.ID=id;
    this.$store.commit('address/updateList',id);
    let obj=this.$store.state.address.upobj;
    this.xRender(obj);
  },
  methods: {
    //渲染页面
    xRender(obj){
      this.tel=obj.tel;
      this.text=obj.name;
      this.address=obj.ress;
      this.checked=obj.isDefault
      this.PostOffice=obj.PostOffice
      let txt=obj.address.split('/')
      txt.splice(txt.length-1,1)
      let address=txt.join('/')
      this.vlaue=address
    },

    // 添加修改地址
    onSubmit(){
      Toast('修改成功')
      let obj={
        "tel":this.tel,
        "name":this.text,
        "address":this.vlaue+"/"+this.address,
        "isDefault":this.checked,
        "PostOffice":this.PostOffice,
        "ress":this.address
      }
      this.$store.commit('address/uplistobj',{obj,"index":this.ID})
    },
    // 获取地区code码,名字
    confirm(arr){
      this.arr=arr;
      this.vlaue='';
      this.vlaue=arr[0].name+"/"+arr[1].name+"/"+arr[2].name;
      this.flag=false
    },
    //关闭选项卡
    cancel(){
      this.flag=false
    },
    //返回
    onClickLeft() {
      this.$router.back();
    },
  },
}
</script>

<style scoped>

</style>